<template>

  <div>
    <el-dialog
      title="登录我的音乐"
      :visible="showLogin"
      width="40%"
      :before-close="closeLogin">
      <div class="diglog-box">
        <!-- 图片区域 -->
        <div class="top-box">
          <div class="img-box" @click="changeLogin">
            <img v-if="indexLogin == 1" style="width: 70px;" src="../../assets/images/computer.png">
            <img v-if="indexLogin == 2" style="width: 70px;" src="../../assets/images/QRcode.png">

          </div>
        </div>

        <!-- 手机号、二维码区域 -->
        <div class="qrcode-box">
          <div class="qrcode-class">
            <!-- 二维码 -->
            <img v-if="indexLogin == 1" style="width: 100%;height: 100%"
                 src="https://imgessl.kugou.com/commendpic/20210902/20210902194948414050.jpg">

            <!-- 手机号登录 -->
            <div v-if="indexLogin == 2">
              <el-input placeholder="请输入手机号" prefix-icon="el-icon-phone"></el-input>

              <div class="phone-login-class">

                <div class="left-box">
                  <el-input placeholder="请输入短信验证码" prefix-icon="el-icon-user-solid"></el-input>
                </div>

                <a href="javascript:;" class="right-box">
                  获取验证码
                </a>
              </div>

              <el-button style="margin-top: 25px;width: 100%">登录</el-button>
            </div>

          </div>

          <div v-if="indexLogin == 1" class="text-class">
            <span>打开微信，扫一扫登录</span>
          </div>
        </div>

      </div>

    </el-dialog>
  </div>
</template>

<script>
export default {
  name: "login",
  props: {
    showLogin: Boolean
  },
  data() {
    return {
      /** 登录方式 1：扫码登录 2：手机号登录 */
      indexLogin: 1
    }
  },
  created() {
  },
  methods: {
    /** 切换登录方式 */
    changeLogin() {
      if (this.indexLogin == 1) {
        this.indexLogin = 2
      } else {
        this.indexLogin = 1
      }
    },
    /** 关闭登录页 */
    closeLogin() {
      this.$parent.showLogin = false
    }
  }
}
</script>

<style lang="scss" scoped>


.diglog-box {
  height: 400px;
  border: 2px solid #000000;

  .top-box {
    height: 70px;

    .img-box {
      width: 70px;
      height: 70px;
      float: right;
    }

    .img-box:hover {
      cursor: pointer;
    }
  }

  .qrcode-box {
    height: 300px;
    padding: 0 150px;

    .qrcode-class {
      //background-color: blue;
      height: 85%;

      .phone-login-class {
        margin-top: 25px;

        .left-box {
          width: 70%;
          height: 40px;
          float: left;
        }

        .right-box {
          text-decoration: none;
          width: 30%;
          height: 40px;
          float: right;
          text-align: center;
          line-height: 40px;
        }

      }

      .el-button {
        background-color: #42b983;
        color: #FFFFFF;
      }


    }

    .text-class {
      height: 15%;
      font-size: 20px;
    }
  }
}

</style>
